<template>
  <div class='dashboard-container'>
    <div class='app-container'>
      <el-card>
        <!-- 顶部搜索表单 -->
        <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="目录名称">
        <el-input v-model="formData.directoryName"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="state" style="margin-left: 20px">
          <el-select style="width:100%" placeholder="请选择" v-model="formData.state">
            <el-option label="启用" :value="1"></el-option>
            <el-option label="禁用" :value="0"></el-option>
          </el-select>
        </el-form-item>
  <el-form-item>
    <el-button size="small" @click="clear">清除</el-button>
    <el-button size="small" type="primary" @click="search">搜索</el-button>
  </el-form-item>
  <el-form-item>
    <el-row type="flex" justify="end">
    <el-button type="text" size="small" @click="$router.push('/subjects/list')" v-if="show"><i class="el-icon-back"></i> 返回学科</el-button>
    <el-button type="success" size="small" @click="add"><i class="el-icon-edit"></i> 新增目录</el-button>
    </el-row>
  </el-form-item>
  </el-form>
  <!-- alert消息提示 -->
   <!-- alert消息提示 -->
   <el-alert
    :title="`共${ total }条记录`"
    type="info"
    show-icon
    :closable="false">
  </el-alert>
  <!-- 表格部分 -->
  <el-table
      :data="directoryData"
      style="width: 100%"
      stripe
      highlight-current-row
      v-loading="loading" element-loading-text="正在加载中" >
      <el-table-column
        type="index"
        label="序号"
        align="center">
      </el-table-column>
      <el-table-column
        prop="subjectName"
        label="所属学科"
        align="center">
      </el-table-column>
      <el-table-column
        prop="directoryName"
        label="目录名称"
        align="center">
      </el-table-column>
      <el-table-column
        prop="creatorID"
        label="创建者"
        align="center">
        <template slot-scope="{row}">
          {{ row.creatorID === 2 ? '超级管理员' : 'creator' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="addDate"
        label="创建日期"
        align="center">
        <template slot-scope="{row}">
          {{ row.addDate|parseTime }}
        </template>
      </el-table-column>
      <el-table-column
        prop="totals"
        label="面试题数量"
        align="center">
      </el-table-column>
      <el-table-column
        prop="state"
        :formatter="formatState"
        label="状态"
        align="center">
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="150">
      <template slot-scope="{ row }">
        <el-button type="text" size="small" @click="changeState(row)">{{ `${row.state === 0 ? '启用' : '禁用'}` }}</el-button>
        <el-button type="text" size="small" @click="edit(row.id)" :disabled="row.state === 1">修改</el-button>
        <el-button type="text" size="small" @click="del(row.id)" :disabled="row.state === 1">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
   <!-- 分页器 -->
   <el-row type="flex" justify="end" align="middle" style="height: 60px">
    <el-pagination
      background
      :page-sizes="[5, 10, 20, 50]"
      :page-size="formData.pagesize"
      :current-page="formData.page"
      @current-change="changePage"
      @size-change="sizeChange"
      :total="total"
      layout="prev, pager, next, sizes,jumper"
      >
    </el-pagination>
  </el-row>
  </el-card>
  <!-- 新增/修改目录弹层组件 -->
  <DirectoryAdd :showDialog.sync="showDialog" :addOrEdit="addOrEdit" ref="directoryForm" :showSubject="showSubject"/>
  </div>
  </div>
</template>

<script>
// 引入接口
import { list, changeState, detail, remove } from '@/api/hmmm/directorys.js'
// 引入枚举数据
import { status } from '@/api/hmmm/constants.js'
// 引入新增/修改目录组件
import DirectoryAdd from '../components/directorys-add.vue'
export default {
  name: 'Directorys',
  components: {
    DirectoryAdd
  },
  data () {
    return {
      formData: {
        directoryName: null,
        state: null,
        page: 1,
        pagesize: 10,
        subjectID: null
      },
      // 总条数
      total: 1,
      // 目录列表数据
      directoryData: [],
      // 控制加载弹层
      loading: false,
      // 变量控制弹层
      showDialog: false,
      // 变量区分是新增还是编辑
      addOrEdit: true,
      // 变量控制返回学科按钮的显示与隐藏
      show: false,
      // 变量控制是否是学科页面点过来的，显示新增表单的第一行
      showSubject: true
    }
  },
  created () {
    this.getDirectoryData()
    this.checkID()
  },
  methods: {
    // 获取目录列表数据
    async getDirectoryData () {
      this.loading = true
      const { data } = await list(this.formData)
      this.total = data.counts
      this.directoryData = data.items
      this.loading = false
    },
    // 格式化状态
    formatState (row, column, cellValue, index) {
      // 要去找 1所对应的值
      const obj = status.find(item => item.value === cellValue)
      return obj ? '已' + obj.label : '未知'
    },
    // 当前页数改变
    changePage (newPage) {
      this.formData.page = newPage
      this.getDirectoryData()
    },
    // 手动选择，当前显示多少条一页
    sizeChange (newPagesize) {
      this.formData.pagesize = newPagesize
      this.getDirectoryData()
    },
    // 修改状态
    async changeState (row) {
      try {
        // 修改状态接口
        await changeState({
          id: row.id,
          state: row.state === 1 ? 0 : 1
        })
        // 拉数据重新渲染
        this.getDirectoryData()
        this.$message.success(`已${row.state === 0 ? '启用' : '禁用'}成功!`)
      } catch (err) {
        //
      }
    },
    // 点击新增用户
    add () {
      this.addOrEdit = true
      this.showDialog = true
    },
    // 修改
    async edit (id) {
      // 获取目录详情
      const { data } = await detail(id)
      this.$refs.directoryForm.formData = data
      this.addOrEdit = false
      this.showDialog = true
    },
    // 删除
    async del (id) {
      await this.$confirm('此操作将永久删除该目录，是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      // 调删除接口
      await remove(id)
      // 重拉数据渲染，当前页删光了的边界行为
      const { data } = await list(this.formData)
      if (data.items.length === 0 && this.formData.page > 1) {
        this.formData.page--
        this.getDirectoryData()
      } else {
        this.total = data.counts
        this.directoryData = data.items
      }
      this.$message.success('删除成功！')
    },
    // 点击搜索
    search () {
      this.getDirectoryData(this.formData)
    },
    // 点击清除
    clear () {
      // 重置顶部表单数据
      this.formData = {
        directoryName: '',
        state: '',
        page: 1,
        pagesize: 10,
        subjectID: ''
      }
    },
    // 判断返回学科的显示与隐藏
    checkID () {
      const id = this.$router.app._route.fullPath.slice(24, 25)
      // console.log(id)
      if (id) {
        this.show = true
        this.showSubject = false
      } else {
        this.showSubject = true
      }
    }

  }
}
</script>

<style scoped lang='less'></style>
